<template>
    <div>
        <Top :title="title"></Top>
        <div class="cinema">
            <ul class="arealist">
                <li v-for="(value,key) in cinemaList">
                    <div class="areaName" v-on:click="isShow(key)">{{key}}</div>
                    <ul class="cinemalist">
                        <li v-for="item in value">
                            <a href="" class="link">
                                <div class="txt">
                                    <div class="title">
                                        <span class="cinematitle">{{item.name}}</span>
                                        <span class="com zuo">座</span>
                                        <span class="com tong">通</span>
                                    </div>
                                    <div class="food">
                                        <span class="con" v-for="con in item.labels" v-if="con.name=='观影小食'">可乐爆米花</span>
                                        <span class="con huo" v-for="con in item.labels" v-if="con.name=='优惠活动'">{{con.name}}</span>
                                    </div>
                                    <div class="road">{{item.address}}</div>
                                    <div class="distance">距离<span class="num">未知</span></div>
                                </div>
                                <div class="next">&gt;</div>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import Top from '../Top.vue';
    import $ from 'jquery';
    export default{
        data:function(){
           return{
                title:'全部影院',
                show:true,
                cinemaList:{}
           }
        },
        methods:{
            isShow:function(ele){
                var titles=document.getElementsByClassName('areaName');
                for(var i=0;i<titles.length;i++){
                    (function(i){
                        if(titles[i].innerHTML==ele){
                            if($(titles[i]).next().css('display')=='block'){
                                $(titles[i]).next().css('display','none');
                            }else{
                                $(titles[i]).next().css('display','block');
                            }
                        }
                    })(i);
                }
            }
        },
        components:{
            Top
        },
        mounted:function(){            
            var self=this;
            var now=new Date().getTime();
            // ajax请求得到全部影院
            $.get('http://localhost:3000/cinema?time='+now,function(res){
                // console.log(res.data.cinemas);
                var list=res.data.cinemas;
                // 获取所有的区
                var arr=[];
                for(var i=0;i<list.length;i++){
                    if(arr.indexOf(list[i].district.name)==-1){
                        arr.push(list[i].district.name);
                    }
                }
                // 获取每个区的所有影院
                var obj={};
                for(var j=0;j<arr.length;j++){
                    obj[arr[j]]=[];
                    for(var i=0;i<list.length;i++){
                        if(arr[j]==(list[i].district.name)){
                            obj[arr[j]].push(list[i]);
                        }
                    }
                }
                self.cinemaList=obj;
            })            
        }
    }
</script>

<style scoped>
    .cinema{
        margin-top:0.5rem;
    }
    .arealist>li .areaName{
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.14rem;
        padding-left: 0.16rem;
        background: #e1e1e1;
        margin-bottom: 1px;
        color: #636363;
        cursor: pointer;
    }
    .cinemalist{
        background-color:#fff;
        display:block;
    }
    .cinemalist>li{
        margin: 0 auto;
        border-bottom: 1px solid #e1e1e1;
        cursor: pointer;
        min-width: 3.2rem;
    }
    .cinemalist>li>.link{
        display:block;
        padding: 0.1rem 0 0.12rem 0.16rem;
        overflow:hidden;
    }
    .cinemalist>li .link .txt{
        width: 75%;
        min-width: 2.3rem;
        float: left;
        overflow: hidden;
    }
    .txt .title{
        font-size: 0.16rem;
        width: 100%;
        margin-bottom: 0.05rem;
        line-height:0.3rem;
    }
    .txt .title .cinematitle{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        vertical-align: text-top;
        max-width: 75%;
        margin-right: 0.03rem;
        color:#333;
        line-height:0.24rem;
    }
    .txt .title .com{
        color: #fc8558;
        margin-right: 0.03rem;
        border:0.01rem solid;
        border-radius:50%;
        font-size:0.1rem;
        display:inline-block;
        width:0.2rem;
        height:0.2rem;
        line-height:0.2rem;
        text-align:center;
    }
    .txt .title .tong{
        color: #88aec8;
    }
    .txt .food{
        margin-bottom: 0.05rem;
        font-size: 0.1rem;
        line-height:0.18rem;
    }
    .txt .food .con{
        display: inline-block;
        border-radius: 0.03rem;
        padding: 0 5px;
        margin: 0 5px;
        font-style: normal;
        color: #fff;
        height: 15px;
        line-height: 15px;
        background-color: #51add0;
    }
    .txt .food .huo{
        background-color: #ff9658;
    }
    .txt .road{
        font-size: 0.12rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        color: #ccc;
        line-height:0.18rem;
        margin-bottom:0.04rem;
    }
    .txt .distance{
        font-size: 0.12rem;
        color: #ccc;
        line-height:0.18rem;
    }
    .link .next{
        font-family:cursive;
        line-height: 0.36rem;
        color: #c6c6c6;
        font-size: 0.18rem;
        position:absolute;
        right:0.18rem;
    }
</style>